<template>
	<view class="messageInfo" v-if="imei">
		<view class="deviceStatus">
			<view class="mode" v-if="dataList.length">
				{{getDeviceStatus(dataList[0].type)}}
			</view>
			<view class="noMsg" v-else >
					{{$t('message.nodata')}}
			</view>
		</view>

		<view class="list">
			<navigator url="/pages/message/message_record" hover-class="none">
				<view class="recordHistory">

					<view class="record_title">
						{{$t('message.record')}}
					</view>
					<view class="right_arrow">
						<uni-icons type="right" color="666" size="22"></uni-icons>
					</view>
				</view>
			</navigator>
			<y-time-line>
				<y-time-line-item class="rowItem" v-for="(item,index) in dataList" :key="item.id"
					:showLine="dataList.length-1===index?false:true">
					<view class="time">
						{{timestampToTime(item.createTime)}}
					</view>
					<view class="content">
						{{getDeviceStatus(item.type)}}
					</view>
				</y-time-line-item>
			</y-time-line>
		</view>
	</view>
	<nodata class="no_data" :isAdd="true" v-else>
		<template v-slot:custom>
			{{$t('map.noDevice')}}
		</template>
	</nodata>
</template>
<!-- {{item.duration}}分钟 -->
<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		apiGetDeviceMsgList
	} from '../../api/device_api';
	import {
		timestampToTime,
		getCurrentDate
	} from '../../utils/time';
	import { i18nTool } from '../../utils/i18en';
	import { getDeviceStatus } from '../../utils/device_status';
import { getImei } from '../../utils/user_tools';
	var day;
	var dataList = ref([]);
	var imei = ref(null);

	onShow(() => {
		imei.value = getImei();
		day = getCurrentDate();
		if (imei.value) {
			getMsgList();
		}
		
		uni.setNavigationBarTitle({
			title:i18nTool('message.navTitle')
		})

	})
	onLoad(()=>{
		
	})

	const getMsgList = async () => {
		var param = {
			// day: day,
			imei: imei.value,
			pageSize: 8,
			pageIndex: 1,
		}
		let res = await apiGetDeviceMsgList(param);
		dataList.value = res.content;

	}

</script>

<style lang="scss" scoped>
	.messageInfo {
		.deviceStatus {
			margin: 50rpx 40rpx;
			height: 500rpx;
			border-radius: 20rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;
			box-shadow: 2rpx 2rpx 5rpx 5rpx rgba(0, 0, 0, 0.1);

			.mode {
				font-size: 50rpx;
				color: #333;
				font-weight: bold;
			}
			.noMsg{
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}
			.status {
				font-size: 30rpx;
				color: #666;
			}
		}



		.list {
			margin: 20rpx 40rpx;
			border-radius: 20rpx;
			background-color: #fff;
			padding-top: 20rpx;
			box-shadow: 2rpx 2rpx 5rpx 5rpx rgba(0, 0, 0, 0.1);

			.recordHistory {
				padding: 20rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.rowItem {
				display: flex;
				justify-content: start;

				.time {
					padding-left: 50rpx;
					color: #666;
					font-size: 24rpx;
				}

				.content {
					padding-left: 50rpx;
					color: #333;
					font-size: 26rpx;
				}
			}


		}
	}

	.no_data {
		width: 100%;
		height: 100%;
	}
</style>